<template>
	<div id="auth_2">
		<div class="top-wrapper">
			<span class="icon"> <i class="el-icon-s-fold"></i> </span>
			<div class="router-wrapper">
				<el-breadcrumb separator="/">
					<el-breadcrumb-item :to="{ path: '/' }"
						>首页</el-breadcrumb-item
					>
					<el-breadcrumb-item
						><a href="/">活动管理</a></el-breadcrumb-item
					>
					<el-breadcrumb-item>活动列表</el-breadcrumb-item>
					<el-breadcrumb-item>活动详情</el-breadcrumb-item>
				</el-breadcrumb>
			</div>
		</div>

		<div class="main-wrapper">
			<div class="mid-wrapper">
				<div class="search-top">
					<span class="search-tip">
						<i class="el-icon-search"></i>
						筛选搜索
					</span>

					<div class="btn-wrapper">
						<el-button type="info" size="mini">重置</el-button>
						<el-button type="primary" size="mini"
							>查询搜索</el-button
						>
					</div>
				</div>
				<div class="search-box">
					<label for="search">输入搜索:</label>
					<el-input
						id="search"
						v-model="input"
						size="mini"
						style="width:200px"
						placeholder="请输入内容"
					></el-input>
				</div>
			</div>

			<div class="tip-wrapper">
				<span> <i class="el-icon-tickets"></i> 数据列表</span>
				<span class="btn">添加</span>
			</div>

			<div class="table-wrapper">
				<el-table
					:data="roles"
					border
					style="width: 100%"
					header-align="center"
				>
					<el-table-column
						align="center"
						fixed
						prop="id"
						label="编号"
						width="100"
					>
					</el-table-column>
					<el-table-column
						align="center"
						prop="name"
						label="角色名称"
						width="150"
					>
					</el-table-column>
					<el-table-column
						prop="description"
						label="描述"
						width="200"
						align="center"
					>
					</el-table-column>
					<el-table-column
						prop="adminCount"
						label="用户数"
						width="100"
						align="center"
					>
					</el-table-column>
					<el-table-column
						prop="createTime"
						label="添加时间"
						width="175"
						align="center"
					>
					</el-table-column>
					<el-table-column
						align="center"
						label="是否启用"
						width="100"
					>
						<template slot-scope="scope">
							<el-switch
								v-model="scope.row.status"
								active-color="#13ce66"
								inactive-color="#ff4949"
							>
							</el-switch>
						</template>
					</el-table-column>
					<el-table-column
						align="center"
						fixed="right"
						label="操作"
						width="200"
					>
						<template slot-scope="scope">
							<el-button
								type="text"
								size="small"
								@click="editMenu = true"
								>分配菜单</el-button
							>
							<el-button
								type="text"
								size="small"
								@click="edirResource = true"
								>分配资源</el-button
							>
							<el-button
								type="text"
								size="small"
								@click="editRole = true"
								>编辑</el-button
							>
							<el-button type="text" size="small">删除</el-button>
						</template>
					</el-table-column>
				</el-table>

				<div class="page-wrapper">
					<el-pagination
						:current-page="currentPage"
						:page-sizes="[100, 200, 300, 400]"
						:page-size="100"
						layout="total, sizes, prev, pager, next, jumper"
						:total="400"
						small
					>
					</el-pagination>
				</div>
			</div>
		</div>

		<el-dialog title="编辑角色" :visible.sync="editRole" width="30%">
			<div class="edit-wrapper">
				<el-form
					ref="form"
					:model="selectRole"
					label-width="80px"
					size="small"
				>
					<el-form-item label="角色名称:">
						<el-input v-model="selectRole.name"></el-input>
					</el-form-item>

					<el-form-item label="描述:">
						<el-input
							type="textarea"
							v-model="selectRole.description"
						></el-input>
					</el-form-item>
					<el-form-item label="是否启用:" prop="status">
						<el-radio-group v-model="selectRole.status">
							<el-radio label="是"></el-radio>
							<el-radio label="否"></el-radio>
						</el-radio-group>
					</el-form-item>
				</el-form>
			</div>
			<span slot="footer" class="dialog-footer">
				<el-button size="mini" @click="editRole = false"
					>取 消</el-button
				>
				<el-button size="mini" type="primary" @click="editRole = false"
					>确 定</el-button
				>
			</span>
		</el-dialog>

		<el-dialog title="分配菜单" :visible.sync="editMenu" width="40%">
			<div class="menu-wrapper">
				<el-tree
					:data="menu"
					show-checkbox
					node-key="id"
					:default-expanded-keys="[2, 3]"
					:default-checked-keys="[5]"
					:props="defaultProps"
				>
				</el-tree>
			</div>
			<span slot="footer" class="dialog-footer">
				<el-button size="mini" @click="editMenu = false"
					>取 消</el-button
				>
				<el-button size="mini" type="primary" @click="editMenu = false"
					>确 定</el-button
				>
			</span>
		</el-dialog>

		<el-dialog title="分配资源" :visible.sync="edirResource" width="40%">
			<div class="resource-wrapper">
				<div class="resource-box">
					<div class="parent">
						<el-checkbox
							size="mini"
							:indeterminate="isIndeterminate"
							v-model="checkAll"
							@change="handleCheckAllChange"
							>商品模块</el-checkbox
						>
					</div>
					<div class="child">
						<el-checkbox-group
							size="mini"
							v-model="checkedCities"
							@change="handleCheckedCitiesChange"
						>
							<el-checkbox
								v-for="city in cities"
								:label="city"
								:key="city"
								>{{ city }}</el-checkbox
							>
						</el-checkbox-group>
					</div>
				</div>

				<div class="resource-box">
					<div class="parent">
						<el-checkbox
							size="mini"
							:indeterminate="isIndeterminate"
							v-model="checkAll"
							@change="handleCheckAllChange"
							>订单模块</el-checkbox
						>
					</div>
					<div class="child">
						<el-checkbox-group
							size="mini"
							v-model="checkedCities"
							@change="handleCheckedCitiesChange"
						>
							<el-checkbox
								v-for="city in cities"
								:label="city"
								:key="city"
								>{{ city }}</el-checkbox
							>
						</el-checkbox-group>
					</div>
				</div>
			</div>
			<span slot="footer" class="dialog-footer">
				<el-button size="mini" @click="edirResource = false"
					>取 消</el-button
				>
				<el-button
					size="mini"
					type="primary"
					@click="edirResource = false"
					>确 定</el-button
				>
			</span>
		</el-dialog>
	</div>
</template>

<script>
import authApi from '@/api/auth'
const cityOptions = ['商品列表', '添加商品', '商品分类', '商品类型', '品牌管理']
export default {
	name: 'auth_2',
	data() {
		return {
			checkAll: false,
			checkedCities: ['商品列表', '添加商品'],
			cities: cityOptions,
			isIndeterminate: true,
			menu: [
				{
					id: 1,
					label: '商品',
					children: [
						{
							id: 2,
							label: '商品列表',
						},
						{
							id: 3,
							label: '添加商品',
						},
						{
							id: 4,
							label: '商品分类',
						},
						{
							id: 5,
							label: '商品类型',
						},
						{
							id: 6,
							label: '品牌管理',
						},
					],
				},
				{
					id: 7,
					label: '订单',
					children: [
						{
							id: 8,
							label: '订单设置',
						},
						{
							id: 9,
							label: '退货申请处理',
						},
						{
							id: 10,
							label: '退货原因设置',
						},
					],
				},
				{
					id: 11,
					label: '营销',
					children: [
						{
							id: 12,
							label: '品牌推荐',
						},
						{
							id: 13,
							label: '新品推荐',
						},
						{
							id: 14,
							label: '人气推荐',
						},
					],
				},
				{
					id: 15,
					label: '权限',
					children: [
						{
							id: 16,
							label: '用户列表',
						},
						{
							id: 17,
							label: '角色列表',
						},
						{
							id: 18,
							label: '菜单列表',
						},
						{
							id: 19,
							label: '资源列表',
						},
					],
				},
			],
			defaultProps: {
				children: 'children',
				label: 'label',
			},
			edirResource: false,
			editRole: false,
			editMenu: false,
			input: '',
			currentPage: 1,
			roles: [],
			selectRole: {
				name: '商品管理员',
				description: '只能查看及操作商品',
				status: '是',
			},
		}
	},
	methods: {
		handleCheckAllChange(val) {
			this.checkedCities = val ? cityOptions : []
			this.isIndeterminate = false
		},
		handleCheckedCitiesChange(value) {
			let checkedCount = value.length
			this.checkAll = checkedCount === this.cities.length
			this.isIndeterminate =
				checkedCount > 0 && checkedCount < this.cities.length
		},
	},
	mounted() {
		authApi.getRoleAll().then((res) => {
			this.roles = res.response
		})
	},
	components: {},
}
</script>

<style scoped lang="less">
#auth_2 {
	.top-wrapper {
		display: flex;
		height: 30px;
		align-items: center;
		border-bottom: 1px solid #e4e7ed;
		.icon {
			margin: 0 8px;
		}
	}
	.main-wrapper {
		margin: 20px;
		.mid-wrapper {
			padding: 20px;
			border: 1px solid #e4e7ed;
			border-radius: 5px;
			.search-top {
				display: flex;
				width: 100%;
				height: 30px;
				justify-content: space-between;
				align-items: center;
				.search-tip {
					font-size: 14px;
				}
			}
			.search-box {
				margin-top: 10px;
				padding-left: 100px;
				margin-bottom: 20px;
				label {
					font-size: 14px;
					margin-right: 10px;
				}
			}
		}

		.tip-wrapper {
			border: 1px solid #e4e7ed;
			border-radius: 5px;
			display: flex;
			height: 35px;
			margin: 20px 0;
			align-items: center;
			justify-content: space-between;
			padding: 10px 15px;
			font-size: 14px;
			.btn {
				border: 1px solid #e4e7ed;
				font-size: 12px;
				padding: 5px 10px;
				border-radius: 5px;
				cursor: pointer;
			}
		}

		.table-wrapper {
			.page-wrapper {
				width: 100%;
				height: 30px;
				display: flex;
				align-items: center;
				justify-content: flex-end;
			}
		}
	}
	.resource-wrapper {
		border: 1px solid #e4e7ed;
		.resource-box {
			.parent {
				display: flex;
				align-items: center;
				height: 35px;
				background-color: #ebeef5;
				padding-left: 20px;
				border: 1px solid #e4e7ed;
			}
			.child {
				padding: 10px;
				padding-left: 20px;
				border: 1px solid #e4e7ed;
			}
		}
	}
}
</style>
